@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义Tailwind扩展（组件和工具类） */
@layer base {

  /* 基础样式：确保全屏布局 */
  html,
  body,
  #root {
    @apply w-full h-full m-0 p-0;
  }

  /* 全局字体设置 */
  body {
    @apply font-inter text-gray-800 bg-white dark:text-gray-200 dark:bg-gray-900;
  }

  /* 基础链接样式 */
  a {
    @apply text-primary hover:text-primaryDark transition-colors duration-200;
  }
}

@layer components {

  /* 自定义组件类 */
  .btn-primary {
    @apply bg-primary text-white hover:bg-primaryDark transition-colors duration-300 rounded-md px-4 py-2 font-medium;
  }

  .card-shadow {
    @apply shadow-md rounded-xl bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700;
  }
}

@layer utilities {

  /* 自定义工具类（按需添加） */
  .content-auto {
    content-visibility: auto;
  }

  .text-balance {
    text-wrap: balance;
  }
}

/* 清除默认表单样式，确保与Tailwind兼容 */
input,
button,
select,
textarea {
  @apply font-sans;
}

/* 暗色模式适配（基于Tailwind的dark类） */
.dark {
  color-scheme: dark;
}

/* 基础动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}